<ion-header>
  <ion-toolbar>
    <ion-title>Backup Report</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="dismiss()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item-group>
    <ion-item-divider>
      Completed: {{ timestamp | date : 'medium' }}
    </ion-item-divider>
    <ion-item>
      <ion-label>
        <h2>System data</h2>
        <p><ion-text [color]="system.color">{{ system.result }}</ion-text></p>
      </ion-label>
      <ion-icon
        slot="end"
        [name]="system.icon"
        [color]="system.color"
      ></ion-icon>
    </ion-item>
    <ion-item *ngFor="let pkg of report?.packages | keyvalue">
      <ion-label>
        <h2>{{ pkg.key }}</h2>
        <p>
          <ion-text [color]="pkg.value.error ? 'danger' : 'success'">
            {{ pkg.value.error ? 'Failed: ' + pkg.value.error : 'Succeeded' }}
          </ion-text>
        </p>
      </ion-label>
      <ion-icon
        slot="end"
        [name]="pkg.value.error ? 'remove-circle-outline' : 'checkmark'"
        [color]="pkg.value.error ? 'danger' : 'success'"
      ></ion-icon>
    </ion-item>
  </ion-item-group>
</ion-content>
